<template>
	<view class="content">
		<ul>
			<li>
				<span>车牌号码:</span>
				<span>{{item.carNum}}</span>
			</li>
			<li>
				<span>车辆识别代号:</span>
				<span>{{item.carIdNum}}</span>
			</li>
			<li>
				<span>车辆类型:</span>
				<span>{{item.carType}}</span>
			</li>
			<li>
				<span>所有人:</span>
				<span>{{item.carPeople}}</span>
			</li>
			<li>
				<span>电话:</span>
				<span>{{item.mobile}}</span>
			</li>
			<li>
				<span>品牌型号:</span>
				<span>{{item.carBrandNum}}</span>
			</li>
			<li>
				<span>汽车里程:</span>
				<span>{{item.carMileage}}</span>
			</li>
			<li>
				<span>使用性质:</span>
				<span>{{item.carUse}}</span>
			</li>
			<li>
				<span>发动机号码:</span>
				<span>{{item.carDriveNum}}</span>
			</li>
			<li>
				<span>驱动形式:</span>
				<span>{{item.carDriveType|carDrive}}</span>
			</li>
			<li>
				<span>变速箱类型:</span>
				<span>{{item.carAtType|carAtType}}</span>
			</li>
			<li>
				<span>汽车排量:</span>
				<span>{{item.carOut}}</span>
			</li>
			<li>
				<span>车身颜色:</span>
				<span>{{item.carColor|color}}</span>
			</li>
			<li>
				<span>总质量:</span>
				<span>{{item.carTotalWeight}}</span>
			</li>
			<li>
				<span>核定载人数:</span>
				<span>{{item.carLoadPeople}}</span>
			</li>
			<li>
				<span>燃油类型:</span>
				<span>{{item.carFuel}}</span>
			</li>
			<li>
				<span>注册日期:</span>
				<span>{{item.carRegNum}}</span>
			</li>
			<li>
				<span>发证日期:</span>
				<span>{{item.carBeginDate}}</span>
			</li>
			<li>
				<span>付款金额:</span>
				<span>{{item.payAmount}}</span>
			</li>
			<li>
				<span>车检日期:</span>
				<span>{{item.times}}</span>
			</li>
			<li>
				<span>车身尺寸:</span>
				<span>{{item.carSize}}</span>
			</li>
			<li>
				<span>住址:</span>
				<span>{{item.carAddress}}</span>
			</li>
			<li>
				<span>整备质量:</span>
				<span>{{item.carWeight}}</span>
			</li>
			<li>
				<span>准牵引总质量:</span>
				<span>{{item.carTowWeight}}</span>
			</li>
			<li>
				<span>档案编号:</span>
				<span>{{item.carRecordNum}}</span>
			</li>
			<li>
				<span>核定载质量:</span>
				<span>{{item.carLoadApproved}}</span>
			</li>
			<li>
				<span>检验记录:</span>
				<span>{{item.carCheckLog}}</span>
			</li>
			<li>
				<span>客户姓名:</span>
				<span>{{item.username}}</span>
			</li>

			<li>
				<span>备注:</span>
				<span>{{item.carRemark}}</span>
			</li>
		</ul>
		<div class="img">
			<h3>行驶证：</h3>
			<image v-if="item.carImgFront" :src="item.carImgFront" mode="widthFix"></image>
			<image v-if="item.carImgBack" :src="item.carImgBack" mode="widthFix"></image>
		</div>
		<div class="img">
			<h3>备注：</h3>
			<image v-if="item.carAttachment1" :src="item.carAttachment1" mode="widthFix"></image>
			<image v-if="item.carAttachment2" :src="item.carAttachment2" mode="widthFix"></image>
			<image v-if="item.carAttachment3" :src="item.carAttachment3" mode="widthFix"></image>
		</div>
		<div style="height:100rpx;"></div>
		<div class='btn' v-if='type!=0' >
			<u-button size="medium" :loading='loading' @click='submit'>录入完成</u-button>
		</div>
		<!--提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:null,
				type:null,
				item:[],
				userInfo:null,
				loading:false,
			};
		},
		onShow(){
			try {
			    const value = uni.getStorageSync('userStatus');
				console.log('value---------',value)
			    if (!value) {
			        uni.navigateTo({
			            url: "/pages/my/login"
			        });
			    }else{
					this.userInfo = value
					console.log('-------this.userInfo--------------',this.userInfo)
				}
			} catch (e) {
			    // error
				console.log('错误',e)
			}
			this.getContent()
			if(this.type != 0){
				this.inputBeginData()
			}
		},
		onUnload() {
			if(this.type != 0){
				console.log('页面卸载')
				//将数据发射到父级监听事件中
				this.$eventHub.$emit('data',{id:this.id,type:this.type});
			}
		},
		onLoad(option){
			console.log(option)
			this.id = option.id
			this.type = option.type
			
		},
		
		methods:{
			getContent(){
				uni.request({
				    url: this.$api.appCarQueryDetail, 
				    data: {
						id:this.id
					},
				    success: (res) => {
						console.log(res.data);
						if(res.data.data){
							this.item = {
								...res.data.carData,
								payAmount:res.data.data.payAmount,
								times:res.data.data.times
							}
							console.log(this.item)
						}
				    },fail() {
				    	
				    }
				});
			},
			//更改录入状态
			inputBeginData(){
				console.log('this.userInfo-------',this.userInfo)
				uni.request({
				    url: this.$api.inputBeginData, 
				    data: {
						id:this.id,
						userId:this.userInfo.id,
						type:this.type
					},
				    success: (res) => {
						console.log('修改录入状态---------',res.data);
						console.log('当前type---------',this.type,this.type == 2);
						if(res.data.data){
							let mess = null
							if(this.type ==2){
								mess = '安检数据'
							}else{
								mess = '环保数据'
							}
							this.$refs.uToast.show({
								title: `${mess}信息录入中`,
								type: 'succes'
							})
						}else{
							this.$refs.uToast.show({
								title: res.data.message,
								type: 'error'
							})
						}
						
				    },fail:(err)=> {
				    	console.log(err)
				    	this.$refs.uToast.show({
				    		title: '与服务器连接失败，请检查网络状况',
				    		type: 'error'
				    	})
				    }
				});
			},
			submit(){
				this.loading = true
				uni.request({
				    url: this.$api.inputOverData, 
				    data: {
						id:this.id,
						userId:this.userInfo.id,
						type:this.type
					},
				    success: (res) => {
						this.loading = false
						console.log('录入完成----------',res.data);
						let mess = '环保数据'
						if(this.type == 2){
							mess = '车检数据'
						}
						this.$refs.uToast.show({
							title: `${mess}信息录入完成`,
							type: 'succes'
						})
						uni.navigateBack({
						    delta: 1
						});
				    },fail:(err)=> {
						this.loading = false
				    	console.log(err)
				    	this.$refs.uToast.show({
				    		title: '与服务器连接失败，请检查网络状况',
				    		type: 'error'
				    	})
				    }
				});
			}
			
		},
		filters:{
			color(e){
				switch (e) {
				    case "1":
						return '白'
				        break;
				    case "2":
						return '灰'
				        break;
				    case "3":
						return '黄'
				        break;
				    case "4":
						return '粉'
				        break;
				    case "5":
						return '红'
				        break;
				    case "6":
						return '紫'
				        break;
				    case "7":
						return '绿'
				        break;
				    case "8":
						return '蓝'
				        break;
				    case "9":
						return '棕'
				        break;
				    case "10":
						return '黑'
				        break;
				    default:
						return '其他'
				        break;
				}
			},
			carDrive(e){
				switch (e) {
				    case "1":
						return '前驱'
				        break;
				    case "2":
						return '后驱'
				        break;
				    case "3":
						return '四驱'
				        break;
				    default:
						return '其他'
				        break;
				}
			},
			carAtType(e){
				switch (e) {
				    case "1":
						return '手动'
				        break;
				    case "2":
						return '自动'
				        break;
				    default:
						return '其他'
				        break;
				}
			}
		}
		
	}
</script>

<style lang="less">
	.content{
		ul{
			display: flex;
			flex-wrap: wrap;
			li{
				width: 100%;
				padding: 10rpx 20rpx;
				box-sizing: border-box;
				display: flex;
				border-bottom: 1px solid #ECF5FF;
				justify-content: space-between;
				span:nth-child(2){
					color:red;
				}
			}
		}
		.img{
			h3{
				line-height: 60rpx;
			}
			image{
				width: 100%;
			}
		}
		.btn{
			width: 100%;
			height: 100rpx;
			padding: 15rpx 0;
			text-align: center;
			position: fixed;
			bottom:0;
			left:0;
			background-color: #fff;
			box-shadow: -1px 0 5px rgba(0,0,0,0.3);
			button{
				height: 60rpx;
			}
		}
	}
</style>
